<template>
  <div class="app-container">
    <el-tag type="success" class="tag">教师数量 ：{{ total }}</el-tag>
    <teacher-table
      :loading="loading"
      :list="list"
      @edit="edit"
      @reload="getList"
    />
    <el-dialog v-if="dialog" :visible.sync="dialog" :title="title">
      <teacher-dialog
        :form="form"
        :total="total"
        @close="dialog = false"
        @reload="getList"
      />
    </el-dialog>
  </div>
</template>

<script>
import { fetchTeacherList } from '../../api/teacher'
import TeacherTable from './module/TeacherTable'
import TeacherDialog from './module/TeacherDialog'
export default {
  name: 'StudentManager',
  components: { TeacherDialog, TeacherTable },
  data() {
    return {
      dialog: false,
      title: '',
      list: [],
      total: 0,
      loading: true,
      form: {
        id: null,
        name: null,
        avatar: null
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    add() {
      this.resetForm()
      this.$setDialog(true, '创建教师', false)
    },
    edit(item) {
      this.$setDialog(true, '教师编辑', true)
      this.form = JSON.parse(JSON.stringify(item))
    },
    resetForm() {
      this.form = this.$options.data().form
    },
    getList() {
      this.loading = true
      fetchTeacherList().then(response => {
        if (response.data.total !== 0) {
          this.list = response.data.items
          for (const i in this.list) {
            this.list[i].num = parseInt(i) + 1
          }
          this.total = response.data.total
          this.loading = false
        } else {
          this.$WARNING('还未添加教师')
          this.list = []
          this.total = 0
          this.loading = false
        }
      })
    }
  }
}
</script>

<style scoped>
    .tag{
        width:110px;
        display: block;
        margin-bottom: 10px
    }
</style>
